<!-- 资产 树形 -->
<template>
	<uni-popup ref="popup" background-color="#fff" @change="onPopup">
		<view class="wrapper  u-p-30">
			<view class="head">
				<u-search placeholder="搜索" @clear="onClear" @search="onSearch" @custom="onSearch" v-model="keyword"></u-search>
			</view>
			<view class="path">
				当前位置: <text @click="onAll" class="path-text u-m-l-20">全部</text>
				<text class="path-text" v-for="(item,index) in currentPosition" @click="onPath(item,index,currentPosition)">{{item.name | path(index)}}</text>
			</view>
			<view class="u-flex-1 body">
				<radio-group @change="radioGroupChange">
					<view class="u-flex   u-p-t-30  u-p-b-30 u-row-between  u-border-bottom " v-for="(item,index) in FilterTreeList">
						<view class="u-flex-4">
							<label :key="item.id" @click="onLabel(item)">
								<view class="u-flex">
									<view class="">
										<radio color="#409EFF" :value="item.id" :checked="item.id == value" />
									</view>
									<view class="">
										{{item.name}}
									</view>
								</view>
							</label>
						</view>
						<view class="u-flex-1 u-text-right">
							<template v-if="item.children!= undefined &&  item.children.length">
								<u-icon name="arrow-right" @click="onIconNextChild(item,index,FilterTreeList)"></u-icon>
							</template>
						</view>
					</view>
				</radio-group>
			</view>

			<view class="u-m-t-20 bottom">
				<HButton @click="onSubmit">确定</HButton>
			</view>
		</view>
	</uni-popup>


</template>
<script>
	import PopUp from '@/components/popup/index.vue'
	import HButton from '@/components/button/index.vue'
	import {
		dicList
	} from '@/filter/index.js'
	import {
		arrayToTree
	} from "@/common/index.js"
	export default {
		components: {
			PopUp,
			HButton
		},
		filters: {
			path(text, index) {
				return `/${text}`
			}
		},

		props: {
			value: {
				type: [String, Number],
				default: ''
			}
		},
		computed: {
			FilterTreeList() {
				let list = this.currentList.length ? this.currentList : this.TreeList
				return list
			},
			TreeList() {
				return arrayToTree(this.list)
			}
		},
		data() {
			return {
				currentPosition: [],
				radioValue: '',
				list: [],
				currentList: [],
				show: false,
				checkLabel: {}
			}
		},
		methods: {

			onSearch(val) {
				this.currentList = this.list.filter((item) => item.name.indexOf(val) > -1);
			},
			onClear() {
				this.currentList = []
				this.init()
			},
			onLabel(item) {
				this.$set(this.checkLabel, 'name', item.name)
				this.$set(this.checkLabel, 'value', item.id)
			},
			onSubmit() {
				this.$emit('value', this.checkLabel)
				this.$refs.popup.close()
			},

			init() {
				this.list = dicList('assetsType')
			},
			onPopup(ev) {
				this.show = ev.show
				if (ev.show) {
					this.radioValue = ''
					this.init()

				} else {
					this.currentList = []
					this.list = []
				}
			},
			openPopUp() {
				this.$refs.popup.open('bottom')
			},
			onAll() {
				this.currentPosition.splice(0, 1)
				this.currentList = []
				this.init()
			},
			async onPath(item, index, arr) {
				let count = arr.length - index
				this.currentPosition.splice(index + 1, count)
				let { id, name } = item
				this.currentList = this.list.filter((item) => item.parent_id == id)
			},

			onIconNextChild(item) {
				let { name, id } = item
				this.currentList = item.children
				this.currentPosition.push({
					name: name,
					id: id,
				})
			},

			radioGroupChange(ev) {
				let {
					value
				} = ev.detail
				this.radioValue = value
			},

		},

	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		background-color: #fff;
		height: 70vh;
		display: flex;
		flex-direction: column;
	}

	.head {
		height: 10%;
	}

	.body {
		height: 80%;
		overflow: auto;
	}

	.bottom {
		height: 10%;
	}
</style>
